<template>
  <div style="height: 100%">
    <van-form ref="form">

      <van-field v-model="formData.name"
                 required
                 label="名称"
                 name="名称"
                 placeholder="请输入名称"
                 :rules="ruleForm.name"/>

      <van-field readonly
                 clickable
                 required
                 name="picker"
                 :value="formData.sexLabel"
                 label="性别"
                 placeholder="点击选择性别"
                 :rules="ruleForm.sexLabel"
                 @click="showSex = true"/>

      <van-field v-model="formData.certNo"
                 required
                 label="身份证号码"
                 name="身份证号码"
                 placeholder="请输入身份证号码"
                 :rules="ruleForm.certNo"/>

      <van-field v-model="formData.phone"
                 required
                 label="联系电话"
                 name="联系电话"
                 placeholder="请输入联系电话"
                 :rules="ruleForm.phone"/>

      <van-field v-model="formData.company"
                 required
                 label="所属公司"
                 name="所属公司"
                 placeholder="请输入所属公司"
                 :rules="ruleForm.company"/>


      <div class="imgBox">
        <div>请上传图片</div>
        <van-field name="uploader" class="picStyle">
          <template #input>
<!--            <van-uploader :accept="accept"-->
<!--                          :before-read="uploadBefore"-->
<!--                          :before-delete="onDel"-->
<!--                          v-model="fileList"-->
<!--                          :max-count="1"/>-->
            <uploadCom ref="uploadRef"
                       :maxNumber="1"
                       @uploadFiles="uploadFiles"
                       @uploadFileIds="uploadFileIds"
                       accept=".png,.jpg,.jpeg"
                       :defaultFiles="defaultFiles" />
          </template>
        </van-field>
      </div>
    </van-form>

    <van-popup v-model="showSex" position="bottom">
      <van-picker title="请选择性别"
                  show-toolbar
                  :columns="sexList"
                  @confirm="selSex"
                  @cancel="showSex = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.valueAlias }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

<!--    <full-loading v-if="loading"></full-loading>-->

  </div>
</template>
<script>
import {uploadAttach} from "@/api/common";

export default {
  data() {
    return {
      defaultFiles: [],
      edit: false,
      formData: {
        name: "",
        sex: "",
        certNo: "",
        phone: "",
        company: "",
        fileCodeArr: [],
        fileList: [],
        index_temp: 0,
      },
      showSex: false,
      sexList: [
        {
          value: '1',
          valueAlias: '男',
        },
        {
          value: '2',
          valueAlias: '女',
        },
      ],
      accept: '.png,.jpg,.jpeg',
      maxSize: 51200, // 文件最大：50M
      fileList: [],

      // loading: false,
      fullscreenModal: false,
      ruleForm: {
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        sexLabel: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ],
        certNo: [
          {required: true, message: '请输入身份证号码', trigger: 'blur'},
          {
            pattern: this.$commonReg.IDNoReg,
            message: this.$commonReg.IDNoMsg,
            trigger: "blur",
          },
        ],
        phone: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {
            pattern: this.$commonReg.phoneReg,
            message: this.$commonReg.phoneMsg,
            trigger: 'blur',
          },
        ],
        company: [
          {required: true, message: '请输入所属公司', trigger: 'blur'},
        ],
      },
    };
  },
  mounted() {
  },
  methods: {
    // 附件上传
    uploadFileIds (arr) {
      this.formData.fileCodeArr = arr;
    },

    uploadFiles (arr) {
      this.formData.fileList = arr;
    },

    selSex(val) {
      this.formData.sex = val.value;
      this.formData.sexLabel = val.valueAlias;
      this.showSex = false;
    },

    // 保存
    handleSave() {
      // this.loading = true;
      this.$refs.form
        .validate()
        .then(async () => {
          if (this.formData.fileCodeArr.length === 0) {
            this.$Notify({type: "warning", message: '请上传图片!'});
            return false;
          }
          let formData = {...this.formData};
          formData.photo = formData.fileCodeArr[0];
          if (this.edit) {
            this.$emit("handleEdit", formData);
          } else {
            this.$emit("handleCheckRefresh", formData);
          }
          this.$emit("close");
        })
    },

    getData(item) {
      this.resetForm();
      this.edit = true;
      for (let key in this.formData) {
        if (key == 'fileCodeArr' || key == 'fileList') {
          this.formData[key] = item[key] || [];
        } else {
          this.formData[key] = item[key] || '';
        }
      }
      this.fileList = this.formData.fileList;
    },

    // 重置表单
    resetForm() {
      this.formData = {
        name: "",
        sex: "",
        sexLabel: "",
        certNo: "",
        phone: "",
        company: "",
        fileCodeArr: [],
        fileList: [],
        photo: "",
        index_temp: 0,
      };
      this.fileList = [];
      this.edit = false;
      setTimeout(() => {
        this.$refs.form.resetValidation();
      });
    },

  },
};
</script>

<style scoped lang="less">
.imgBox {
  padding: 16px;
  position: relative;

  &:before {
    position: absolute;
    left: 0.21333rem;
    color: #ee0a24;
    font-size: 0.37333rem;
    content: '*';
  }

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.42667rem;
    bottom: 0;
    left: 0.42667rem;
    border-bottom: 0.02667rem solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }

  .picStyle {
    padding: 16px 0px 16px 0px !important;
  }

}
</style>
